<template>
  <div>   
    <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent style="text-align: left;">
      <el-form-item label="相机IP" prop="ip">
        <el-input v-model="queryParams.ip" placeholder="请输入相机IP" clearable style="width: 240px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button icon="search" type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"  @click="handleAdd" v-hasPermi="['system:post:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success"  :disabled="single" @click="handleUpdate" >
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"  :disabled="multiple" @click="handleDelete" >
          删除
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading"  :data="dataList" border stripe header-cell-class-name="el-table-header-cell" highlight-current-row 
    @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="id" label="相机编号" align="center" width="120" />
      <el-table-column prop="name" label="相机名称" align="center" :show-overflow-tooltip="true" width="150" />
      <!-- <el-table-column prop="name" label="绑定防区" align="center"  /> -->
      <el-table-column prop="ip" label="相机IP" width="150" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="port" label="相机端口" align="center" width="120" />
      <el-table-column prop="username" label="用户名" align="center" :show-overflow-tooltip="true" width="120" />
      <el-table-column prop="password" label="密码" align="center" :show-overflow-tooltip="true" width="120" />
      <el-table-column prop="trackParid" label="厂商" align="center" :show-overflow-tooltip="true" width="120" />
      <el-table-column prop="cameraHeight" label="安装高度(m)" align="center" :show-overflow-tooltip="true" width="120" />
      
      <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="success" size="small" icon="edit" title="编辑" v-hasPermi="['defencearea:edit']"
          @click="handleUpdate(scope.row)"></el-button>
        <el-button type="danger" size="small" icon="delete" title="删除" v-hasPermi="['defencearea:delete']"
          @click="handleDelete(scope.row)"></el-button>
      </template>
      </el-table-column>
    </el-table>
    
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :lock-scroll="false" v-model="open" width="1200px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">

          <el-col :lg="6">
            <el-form-item label="编号" prop="id">
              <el-input-number v-model.number="form.id" controls-position="right" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="相机名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入相机名称" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="相机IP" prop="ip">
              <el-input v-model="form.ip" placeholder="请输入相机IP" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="相机端口" prop="port">
              <el-input v-model.number="form.port" placeholder="请输入相机端口" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="登录名" prop="username">
              <el-input v-model="form.username" placeholder="请输入登录名" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="厂商" prop="trackparid">
              <el-input v-model.number="form.trackparid" placeholder="请输入厂商" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="最小倍数" prop="minViewAngle">
              <el-input v-model="form.minViewAngle" placeholder="请输入最小倍数视场角度" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="2X" prop="viewAngle2X">
              <el-input v-model="form.viewAngle2X" placeholder="请输入2X视场角度" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="最大倍数" prop="maxViewAngle">
              <el-input v-model="form.maxViewAngle" placeholder="最大倍数视场角度" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="球机最大倍数" prop="maxZoom">
              <el-input v-model.number="form.maxZoom" placeholder="请输入球机最大倍数" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="变倍比例系数" prop="maxZoomRatio">
              <el-input v-model="form.maxZoomRatio" placeholder="请输入最大变倍比例系数" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="水平方向左边" prop="panLeft">
              <el-input v-model="form.panLeft" placeholder="请输入左边onvif值" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="水平方向中间" prop="panMiddle">
              <el-input v-model="form.panMiddle" placeholder="请输入中间onvif值" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="水平左边角度" prop="panLeftAngle">
              <el-input v-model="form.panLeftAngle" placeholder="请输入水平左边角度" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="水平右边角度" prop="panMiddleAngle">
              <el-input v-model="form.panMiddleAngle" placeholder="请输入水平右边角度" />
            </el-form-item>
          </el-col>


          <el-col :lg="6">
            <el-form-item label="水平方向中间" prop="panMiddle2">
              <el-input v-model="form.panMiddle2" placeholder="请输入中间onvif值" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="水平方向右边" prop="panRight">
              <el-input v-model="form.panRight" placeholder="请输入右边onvif值" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="水平中间角度" prop="panMiddle2Angle">
              <el-input v-model="form.panMiddle2Angle" placeholder="请输入水平中间角度" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="水平右边角度" prop="panRightAngle">
              <el-input v-model="form.panRightAngle" placeholder="请输入水平右边角度" />
            </el-form-item>
          </el-col>



          <el-col :lg="6">
            <el-form-item label="垂直上" prop="tiltTop">
              <el-input v-model="form.tiltTop" placeholder="请输入垂直上onvif值" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="垂直下" prop="tiltBottom">
              <el-input v-model="form.tiltBottom" placeholder="请输入垂直下onvif值" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="垂直上角度" prop="tiltTopAngle">
              <el-input v-model="form.tiltTopAngle" placeholder="请输入垂直上角度" />
            </el-form-item>
          </el-col>
          <el-col :lg="6">
            <el-form-item label="垂直下角度" prop="tiltBottomAngle">
              <el-input v-model="form.tiltBottomAngle" placeholder="请输入垂直下角度" />
            </el-form-item>
          </el-col>
          <!-- 
          <el-col :lg="6">
            <el-form-item label="PanOffsetAngle" prop="panOffsetAngle">
              <el-input v-model="form.panOffsetAngle" placeholder="请输入PanOffsetAngle" />
            </el-form-item>
          </el-col> -->

          <el-col :lg="6">
            <el-form-item label="最小倍数P" prop="minZoomPan">
              <el-input v-model="form.minZoomPan" placeholder="请输入最小倍数P" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="最小倍数T" prop="minZoomTilt">
              <el-input v-model="form.minZoomTilt" placeholder="请输入最小倍数T" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="最大倍数P" prop="maxZoomPan">
              <el-input v-model="form.maxZoomPan" placeholder="请输入最大倍数P" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="最大倍数T" prop="maxZoomTilt">
              <el-input v-model="form.maxZoomTilt" placeholder="请输入最大倍数T" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="高度" prop="cameraHeight">
              <el-input v-model="form.cameraHeight" placeholder="请输入高度" />
            </el-form-item>
          </el-col>

          <el-col :lg="6">
            <el-form-item label="逆时针旋转">
              <el-radio-group v-model="form.counterclockwise">
                <el-radio v-for="dict in clockwise_status" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{
                  dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>

          </el-col>

          <el-col :lg="6">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in device_status" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{
                  dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :lg="24">
            <el-form-item label="码流地址" prop="cameraURL">
              <el-input :disabled="form.cameraURL != undefined" v-model="form.cameraURL" placeholder="请输入码流地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer v-if="opertype != 3">
        <el-button text @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
  
  
<script>
import { listCamera,addCamera, delCamera,updateCamera, getCamera,} from '@/api/device/camera'

export default {
  name: 'camera',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sort: 'id',
        sortType: 'asc',
        ip: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
         ip: [{ required: true, message: 'ip不能为空', trigger: 'blur' }],
         port: [{ required: true, message: 'port不能为空', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getList()
    this.getDicts('device_status').then((response) => {
      this.statusOptions = response.data.data
    })
  },
  methods: {
    getList() {
      this.loading = true
      listCamera(this.queryParams).then(res => {
      if (res.data.code == 200) {
        this.dataList = res.data.data
        //total.value = data.totalNum
        this.loading = false
      }
      })
    },
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: null,
        bindingAreaId: null,
        ip: null,
        port: 80,
        username: null,
        password: null,
        cameraHeight: 2,

        trackparid: null,
        trackMode: null,
        minViewAngle: 54,
        viewAngle2X: 30,
        maxViewAngle: 4,
        maxZoom: 20,
        maxZoomRatio: 40,

        panLeft: '-1',
        panMiddle: '0',
        panLeftAngle: '180',
        panMiddleAngle: '360',

        panMiddle2: '0',
        panRight: '1',
        panMiddle2Angle: '0',
        panRightAngle: '180',

        tiltTop: '1',
        tiltBottom: '-1',
        tiltTopAngle: '-15.0',
        tiltBottomAngle: '90',

        cameraURL: ' ',

        minZoomPan: '1',
        minZoomTilt: '-1',
        maxZoomPan: '-15.0',
        maxZoomTilt: '90',
 
        counterclockwise: 0
      }
      this.resetForm('formRef')
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加相机'
    },
    handleUpdate(row) {
      this.reset()
      const Ids = row.id || this.ids
      getCamera(Ids).then((response) => {
        this.form = response.data.data
        this.open = true
        this.title = '修改相机'
      })
    },
    submitForm: function () {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateCamera(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addCamera(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    handleDelete(row) {
      const Ids = row.id || this.ids
      this.$confirm('是否确认删除相机编号为"' + Ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return delCamera(Ids)
        })
        .then(() => {
          this.getList()
          proxy.$modal.msgSuccess("删除成功")
        })
    },
  },
}
</script> 